<template>
	<view class="content">
		<!-- 		<view class="wrap">
					<u-swiper :list="wraplist" mode="none" border-radius="0" height="350"></u-swiper>
				</view> -->
		<view class="order-details card">
			<view class="order-details">
				<view class="order-title">{{ticketList.ticket_name}} <text>({{ticketList.title}})</text></view>
				<view class="order-money">
					<view>
						<text style="font-size: 14px;color: #d60000;">￥</text>{{pricingList}}
						<text class="cheaper">原价 : ￥{{cheaper}}</text>
					</view>
					<text style="color: #2979ff;font-size: 14px;margin-top: 20rpx;padding-left: 80rpx; "
						@click="openPpayTipsShow(index)">购买须知</text>
				</view>
				<u-line margin="20rpx 0" colo="#e2e4e3" />
				<view style="z-index: 999999;">
					<!--  -->
					<selectTab :planlist="planlist" :selectedDate="selectDate" @date="getDateTime" v-if="!payBtnState">
					</selectTab>
				</view>
			</view>
		</view>
		<view class="order-person card" style="padding: 0;">
			<view class="content-box">
				<view class="head-text">
					<text class="title">选择场次</text>
				</view>
				<view class="games-content">
					<view class="games" @click="selectItem(index)" :class="{'selected':activeIndex == index}"
						v-for="(item,index) in gameList" :key="index">
						<view class="games-time">{{item.start_time}}</view>
						<view class="games-price"><text style="font-size: 11px;">￥</text>{{item.suggest_price}}</view>
					</view>
					<view style="width: 100%;" v-if="gameList.length==0">
						<view class="emptyBox">
							<image src="@/static/emty.png" mode=""></image>
							<text>
								暂无可售场次
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="order-person card">
			<view class="order-number">
				<view>数 量 : {{value}} 张</view>
				<u-number-box v-model="value" @change="valChange" :min="minNum" :max="maxNum" ref="numberbox"
					:disabled-input="true" :disabled="numberDisabled" @plus="plus" @minus="minus"></u-number-box>
			</view>
		</view>

		<view class="order-person card">
			<u-cell-item icon="account" title="联系人信息" :arrow="false"></u-cell-item>
			<view class="order-form">
				<u-form :model="form" ref="uForm" label-width="150">
					<u-form-item label="联系人" prop="name">
						<u-input v-model="form.name" placeholder="请填写联系人姓名" maxlength="15" />
					</u-form-item>
					<u-form-item label="联系电话" prop="intro">
						<u-input v-model="form.tel" placeholder="请填写联系电话" type="number" maxlength="11" />
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="order-person card">
			<!-- 实名制认证 -->
			<u-cell-item icon="account-fill" title="实名制认证" :arrow="false"></u-cell-item>
			<u-form :model="form" ref="uForm" label-width="150">
				<view class="real-name animated backOutDown" v-for="(item,index) in userList" :key="index">
					<view class="real-form">
						<u-form-item label="姓  名" prop="name">
							<u-input v-model="item.name" placeholder="请输入姓名" />
						</u-form-item>
						<u-form-item label="证件类型" prop="type">
							<u-input v-model="item.cardType.label" type="select" @click="idSheetShow(index)" />
							<u-action-sheet :list="idTypeList" v-model="typeShow" @click="idSheetCallback">
							</u-action-sheet>
						</u-form-item>
						<u-form-item label="证件号" prop="intro">
							<u-input v-model="item.id" placeholder="请输入证件号码" maxlength="28" />
						</u-form-item>
					</view>
					<view class="trash" @click="removeCardNo(index)" v-if="index+1 > minNum">
						<u-icon name="trash" color="#e54d42" size="60"></u-icon>
					</view>
					<view class="trash" v-else></view>
				</view>
			</u-form>
		</view>
		<view style="padding: 20rpx;color: #b8b8b8;padding-bottom: 200rpx;text-align: center;">
			请您在提交订单前仔细阅读<text style="color: #35bcf6;" @click="tipShow = true">《个人信息授权声明》</text>
		</view>
		<view class="inform-body"></view>
		<view class="footBar ">
			<view class="button-class">
				<view><text style="color: #d60000;padding: 0;">金额￥</text> {{sum}}</view>
				<u-button type="warning" @click="plysubmit" :disabled="loading || payBtnState" :loading="loading"
					class="pay" :custom-style="{backgroundColor: '#efb43e',borderRadius:'4'}">立即支付</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<Tips :tipShow="tipShow" @changeTipShow='changeTipShow'></Tips>
		<u-popup v-model="payTipsShow" mode="bottom" height="800rpx" width="100%" safe-area-inset-bottom>
			<view style="padding: 20rpx;">
				<view style="font-weight: 800;line-height: 60rpx;font-size: 16px;text-align: center;">预定须知</view>
				{{garden}}
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		is_array_unique,
		checkIdcard
	} from '@/utils/tools.js'
	import selectTab from '@/components/selectDate.vue'
	import Tips from '@/components/tips.vue'
	// import gameCard from '@/components/gameCard.vue'
	export default {
		data() {
			return {
				planlist: {},
				gameList: [],
				activeIndex: 0,
				numberDisabled: false,
				priceList: '0.00', //现价
				cheaper: '0.00', //原价
				selectDate: "",
				tipShow: false,
				ticket_id: '',
				wraplist: [],
				ticketList: [],
				pricingList: [],
				dateShow: false,
				loading: false,
				number: 1,
				mode: 'date',
				value: 1,
				price: '',
				sum: 0,
				form: {
					name: '',
					tel: '',
				},
				minNum: 1,
				maxNum: 100,
				garden: '',
				Time: '',
				planId: '',
				payTipsShow: false,
				userList: [{
					name: '',
					cardType: {
						label: '身份证',
						value: 'idcard'
					},
					id: '',
				}],
				refundId: '',
				typeShow: false,
				selectedId: 0, //实名制当前选择index
				//0表示身份证，1表示护照，2表示军官证，3表示台胞证，4表示港澳通行证，5表示大陆居民往来台湾通行证
				idTypeList: [{
						id: 1,
						value: 'idcard',
						text: '身份证'
					},
					{
						id: 2,
						value: 'passport',
						text: '护照'
					},
					{
						id: 4,
						value: 'hkmap',
						text: '港澳通行证'
					},
					{
						id: 3,
						value: 'mtps',
						text: '台胞证'
					},
					{
						id: 5,
						value: 'taiwan',
						text: '台湾通行证'
					}
				],
				option: '',
				//判断隐藏
				isPageShow: false,
				payBtnState: true, //判断是否可以支付
				cardItem: {
					name: '',
					cardType: {
						label: '身份证',
						value: 'idcard'
					},
					id: ''
				}
			};
		},
		components: {
			selectTab,
			// gameCard
			Tips
		},
		onLoad(e) {
			this.isAuthShow = false
			this.ticket_id = e.id
			//	uni.setStorageSync("ticket_id",e.id)
			//	this.selectDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd')
		},
		onShow() {
			//开启Loading

			this.getDetailsList()
			//获取价格策略
			// this.getpricing()
			//生成日历
			//	this.getPlanPrice();
			// 获取默认场次
			//	this.getGames()
		},
		beforeDestroy() {
			//TODO 删除本地存储是否可行
			uni.clearStorageSync('priceListInfo')
			uni.clearStorageSync('num')
		},
		methods: {
			changeTipShow() {
				this.tipShow = false
			},
			// 选择日期
			getDateTime(time) {
				this.selectDate = time
				this.getGames()
			},
			openPpayTipsShow(idx) {
				this.payTipsShow = true
			},
			selectItem(idx = 0) {
				if (this.$refs.numberbox.inputVal > this.minNum) {
					this.userList.splice(0, this.value - 1)
				}
				this.number = this.minNum
				this.value = this.minNum
				this.$refs.numberbox.inputVal = this.value
				let selfGames = this.gameList[idx];
				this.activeIndex = idx
				//设置结算价格
				this.pricingList = selfGames.suggest_price
				//设置场次
				this.planId = selfGames.ticket_plan_id
				
				
			},
			// 根据日期获取场次
			getGames() {
				let that = this
				const member = uni.getStorageSync('member_id');
				const postData = {
					'ticket_id': that.ticket_id,
					'date': that.selectDate,
					'sharer_id': member
				}
				this.$u.post('/api/ticket_plan/games', postData).then(res => {
					that.gameList = res
					// 默认选择第一项
					that.selectItem()
					if (that.gameList.length == 0) {
						that.sum = 0
					} else {
						// 根据最小数量设置总价
						that.sum = that.value  * that.pricingList
					}
				}).catch(err => {

				})
			},
			// 支付按钮
			plysubmit() {
				let that = this
				// 判断联系人
				if (this.$u.test.isEmpty(this.form.name)) {
					this.$refs.uToast.show({
						title: '联系人不能为空',
						type: 'error',
					})
					return
				}
				if (!this.$u.test.mobile(this.form.tel)) {
					this.$refs.uToast.show({
						title: '联系电话不正确',
						type: 'error',
					})
					return false
				}
				// 判断实名制认证
				for (let i = 0; i < this.userList.length; i++) {
					if (this.$u.test.isEmpty(this.userList[i].name)) {
						this.$refs.uToast.show({
							title: '姓名不能为空',
							type: 'error',
						})
						return false
					}
					if (this.$u.test.isEmpty(this.userList[i].id)) {
						this.$refs.uToast.show({
							title: '证件号码不能为空',
							type: 'error',
						})
						return false
					}
					if (!checkIdcard(this.userList[i].id, this.userList[i].cardType)) {
						this.$refs.uToast.show({
							title: '请输入正确证件号码',
							type: 'error',
						})
						return false
					}
				}
				that.loading = true;
				that.getCreateOrder()
				//用户订阅通知 TODO
			},
			// 步进器
			valChange(e) {
				let that = this
				that.number = e.value
				uni.setStorageSync('num', e.value)
				// 金钱
				that.sum = e.value * this.pricingList
			},
			// 步进器 加
			plus(index) {
				// if (this.$u.test.isEmpty(this.priceList)) {
				// 	this.$refs.uToast.show({
				// 		title: '请先选择日期',
				// 		type: 'error',
				// 	})
				// this.value--
				// this.$refs.numberbox.inputVal = this.value
				// this.numberDisabled = true
				// 	return
				// }
				this.number++
				this.userList.push(Object.assign({}, this.cardItem))
			},
			// 步进器减
			minus() {
				this.number--
				this.userList.pop()
			},
			// 垃圾桶减少
			removeCardNo(index) {
				if (this.value <= this.minNum) {
					this.$refs.uToast.show({
						title: '不能再少了',
						type: 'error',
					})
					return
				}
				this.value--
				// 用ref操作dom元素
				this.$refs.numberbox.inputVal = this.value
				this.userList.splice(index, 1)
			},
			// 门票详情 
			getDetailsList() {
				if (this.isPageShow) {
					return
				}
				const member = uni.getStorageSync('member_id');
				let that = this;
				let postData = {
					"sharer_id": member,
					"ticket_id": this.ticket_id
				};
				that.$u.post('/api/ticket/details', postData).then(res => {
					that.garden = res.garden
					that.minNum = res.min_num
					that.maxNum = res.max_num
					that.cheaper = res.price; //原价
					that.priceList = res.discounts; //现价
					that.ticketList = res
					if (uni.getStorageSync('num')) {
						that.value = uni.getStorageSync('num')
					} else {
						that.value = res.min_num
					}
					for (let i = 0; i < that.value-1; i++) {
						that.userList.push(Object.assign({}, that.cardItem))
						console.log(that.userList,"22222222222");
					}
					for (let i = 0; i < res.cover.length; i++) {
						that.wraplist.push({
							"image": res.cover[i]
						})
					}
					console.log(res.planlist, "日期");
					if (res.planlist.length === 0) {
						uni.showModal({
							title: '提示',
							content: '该产品未找到可售日期~',
							showCancel: false,
							success: function(res) {
								uni.navigateBack({
									data: 1
								});
							}
						});
						return false;
					}
					that.planlist = Object.values(res.planlist)
					//默认加载最近有场次的日期
					that.selectDate = that.planlist[0]['plan_time'];
					that.getGames();
					that.isPageShow = true;
					//支付按钮可用
					that.payBtnState = false;
				});
				
			},
			// 获取门票价格
			// getpricing() {
			// 	const member = uni.getStorageSync('member_id');
			// 	console.log("00000000000",member);
			// 	let that = this;
			// 	let postData = {
			// 		"ticket_id": this.ticket_id,
			// 		"sharer_id": member,
			// 	};
			// 	that.$u.post('/api/pricing/get_pricing', postData).then(res => {
			// 		that.sum = res.pricing.share_price
			// 	});
			// },
			// 发起支付
			getGopay(order_id) {
				let that = this;
				let postData = {
					"order_id": order_id
				};
				uni.getProvider({
					service: 'oauth',
					success: function(pro) {
						console.log(pro.provider[0]);
						that.$u.post('/api/pay/gopay', postData).then(res => {
							uni.requestPayment({
								// #ifndef MP-TOUTIAO
								provider: pro.provider[0],
								timeStamp: res.timeStamp,
								nonceStr: res.nonceStr,
								package: res.package,
								signType: res.signType,
								paySign: res.paySign,
								// #endif

								// #ifdef MP-TOUTIAO
							 orderInfo: res,
								// #endif

								// #ifdef  MP-ALIPAY
								orderInfo: res,
								// #endif
								success(res) {
									that.$u.route({
										type: 'navigateTo',
										url: 'pages/order/order_dateils?id=' +
											order_id,
									})
								},
								fail(res) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									})
									setTimeout(() => {
										that.$u.route({
											type: 'navigateTo',
											url: 'pages/order/order_dateils?id=' +
												that.refundId,
										})
									}, 2000)
									console.log("回调失败", res)
								}
							})
						})
					}
				});
			},
			// that.$u.post('/api/pay/gopay', postData).then(res => {
			// 微信支付
			// #ifdef  MP-WEIXIN
			// uni.requestPayment({
			// 	provider: "weixin",
			// 	timeStamp: res.timeStamp,
			// 	nonceStr: res.nonceStr,
			// 	package: res.package,
			// 	signType: res.signType,
			// 	paySign: res.paySign,
			// 	success(res) {
			// 		that.$u.route({
			// 			type: 'navigateTo',
			// 			url: 'pages/order/order_dateils?id=' + order_id,
			// 		})
			// 	},
			// 	fail(res) {
			// 		console.log("回调失败", res)
			// 	}
			// })
			// #endif

			// 抖音支付
			// #ifdef  MP-TOUTIAO
			// uni.requestPayment({
			// 	provider: "toutiao",
			// 	orderInfo: res.orderInfo,
			// 	service: 5,
			// 	success(pro) {

			// 		switch (pro.code) {
			// 			case 0:
			// 				that.$u.route({
			// 					type: 'navigateTo',
			// 					url: 'pages/order/order_dateils?id=' + order_id,
			// 				})
			// 				break;
			// 			case 1:
			// 				console.log("支付超时")
			// 				break;
			// 			case 2:
			// 				console.log("支付失败")
			// 				break;
			// 			case 3:
			// 				console.log("支付关闭")
			// 				break;
			// 			case 4:
			// 				console.log("支付取消")
			// 				break;
			// 		}

			// 	},
			// 	fail(res) {
			// 		console.log("回调失败", res)
			// 	}
			// })
			// #endif
			// 支付宝支付
			// #ifdef  MP-ALIPAY
			// uni.requestPayment({
			// 	provider: "alipay",
			// 	orderInfo: res,
			// 	service: 5,
			// 	success(pro) {
			// 		if (pro.resultCode === '9000') {
			// 			that.$u.route({
			// 				type: 'navigateTo',
			// 				url: 'pages/order/order_dateils?id=' + order_id,
			// 			})
			// 		} else {
			// 			uni.showToast({
			// 				title: '支付异常'
			// 			})
			// 		}
			// 	},
			// 	fail(res) {
			// 		console.log("回调失败", res)
			// 	}
			// })
			// #endif

			// 创建订单
			getCreateOrder() {
				const member = uni.getStorageSync('member_id');
				let that = this;
				let postData = {
					"ticket_plan_id": this.planId,
					"link_name": this.form.name, //下单人姓名
					"link_mobile": this.form.tel, //下单人电话
					// 下单人身份证
					"idCrad": this.userList,
					"quantity": this.number, //数量
					"sharer_id": member,
				};
				console.log(postData);
				that.$u.post('/api/pay/create_order', postData).then(res => {
					that.loading = true
					this.refundId = res.order_id
					this.getGopay(res.order_id)
				}).catch(err => {
					console.log(err);
				});
			},
			getPlanPrice() {
				// 从缓存里拿 member_id
				const member = uni.getStorageSync('member_id');
				let that = this;
				let postData = {
					"sharer_id": member,
					"ticket_id": this.ticket_id,
				};
				console.log("通过二维码获取的 id ", postData.sharer_id)
				that.$u.post('/api/ticket_plan/list', postData).then(res => {
					console.log('opllist', res);
					if (uni.getStorageSync('priceListInfo')) {
						that.priceList = uni.getStorageSync('priceListInfo')
					} else {
						that.priceList = Object.values(res)
						that.pricingList = this.priceList[0].share_price
						that.cheaper = this.priceList[0].market_price
						that.Time = that.priceList[0].start_time
						that.planId = this.priceList[0].ticket_plan_id
						that.planlist = Object.values(res)
						//默认加载最近有场次的日期
						that.selectDate = res[0]['plan_time'];
						that.getGames();
					}
				});
			},
			showConfirmButton() {
				if (this.returnType === 'many' || this.returnType === 'solts') {
					return false;
				}
				return true;
			},
			idSheetShow(index) {
				this.selectedId = index;
				this.typeShow = true;
			},
			//选择证件类型
			idSheetCallback(e) {
				let item = this.idTypeList[e];
				this.userList[this.selectedId].cardType = {
					label: item.text,
					value: item.value
				};
			}
		},
	}
</script>
<style lang="scss" scoped>
	scroll-view ::-webkit-scrollbar {
		display: none;
	}

	.card {
		border-radius: 10px;
	}

	.content {
		background: repeating-linear-gradient(to bottom, #efb43e, #fff);
		overflow: hidden;
		padding: 10px;
		overflow: hidden;

		.order-details {
			padding: 20rpx;
			width: 100%;
			background-color: #FFFFFF;

			text {
				margin-left: 20rpx;
				color: #bf2727;
			}

			.order-title {
				padding: 20rpx 0rpx;
				font-size: 40rpx;
				font-weight: 700;
			}

			.cheaper {
				font-size: 25rpx;
				color: #000000;
				text-decoration: line-through;
			}

			.order-money {
				color: #d60000;
				font-size: 20px;
				font-weight: 700;
				display: flex;
				justify-content: space-between;
			}
		}

		.order-cell {
			background-color: #FFFFFF;
		}

		.order-number {
			background-color: #FFFFFF;
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.order-person {
			padding: 10rpx;
			margin: 20rpx auto;
			background-color: #FFFFFF;

			.order-form {
				padding: 10rpx 40rpx;
			}
		}
	}

	.calendar {
		margin-top: 30rpx;
	}

	.real-name {
		display: flex;
		justify-content: space-around;
		width: calc(100 / 2);
		background-color: #FFFFFF;

		.real-form {
			padding: 20rpx;
			margin-left: 10rpx;
			width: 80%;
		}

		.trash {
			display: flex;
			align-items: center;
			width: 50rpx;
		}
	}

	.footBar {
		z-index: 2;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);

		.button-class {
			display: flex;
			justify-content: space-between;

			view {
				font-weight: 700;
				text-align: left;
				width: 60%;
				margin-left: 20px;
				font-size: 45rpx;
				color: #d60000;
				line-height: 100rpx;

				text {
					font-weight: 500;
					padding: 8rpx 15rpx;
					font-size: 30rpx;
					color: #838383;
				}
			}

			.pay {
				width: 40%;
				margin-right: 20px;
			}

			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
	}

	.content-box {
		padding: 20rpx;

		// padding-left: 0;
		.title {
			padding-left: 20rpx;
		}

		.head-text {
			display: flex;
			flex-direction: row;
			justify-content: space-between
		}

		.games-content {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-top: 20rpx;
			flex-wrap: wrap;
			// position: relative;

			.games {
				width: 180rpx;
				padding: 0 40rpx 0 10rpx;
				border-radius: 8rpx;
				border: 2rpx solid #eeeff2;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				position: relative;

				.games-time {
					font-size: 16px;
					text-align: left;
					color: #efb43e;
				}

				.games-price {
					color: #d60000;
					text-align: right;
					font-size: 14px;
				}
			}
		}

		.title {
			font-weight: 800;
			font-size: 16px;
		}
	}
</style>
